<script lang="ts" setup>
defineProps({
  name: {
    type: String,
  },
  desc: {
    type: String,
  },
  icon: {
    type: String,
  },
  chosen: {
    type: Boolean,
  },
});
</script>
<template>
  <div
    class="flex items-center p-5 rounded border-1 w-full md:w-100 mt-10 md:ml-5 cursor-pointer hover:bg-gray-200 hover:border-red-300"
    :class="chosen ? 'border-red-300 bg-gray-200' : ''">
    <img :src="icon" alt="" class="w-10 h-10" />
    <span class="h-12 bg-gray-100 mr-6 ml-6 line"></span>
    <div class="flex flex-col">
      <h2 class="text-3xl">
        {{ name }}
      </h2>
      <p class="mb-0 text-sm text-gray-500">
        {{ desc }}
      </p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.line {
  width: 1px;
}
</style>
